<template>

<div>

    <h1>商品分类</h1>
    <el-button class="filter-item"  icon="el-icon-edit" @click="dialogFormVisible=true">
        {{ $t('table.add') }}
      </el-button>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="类别id"
      width="180">
      <template slot-scope="scope">
        <span>{{scope.row.id}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="类别名称"
      width="180">
      <template slot-scope="scope">
        <span>{{scope.row.commodTypeName}}</span>
      </template>
    </el-table-column>
    
    
    
    

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  

<el-dialog title="类别添加" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="类别名称" prop="commodTypeName">
          <el-input  v-model="temp.commodTypeName" />
        </el-form-item>
        <el-form-item label="类别父级" prop="commodTypeParentId">
          <el-date-picker v-model="temp.commodTypeParentId" type="datetime" placeholder="Please pick a date" />
        </el-form-item>
        <el-form-item label="类别Id" prop="commodTypeId">
          <el-input type="number" v-model="temp.commodTypeId" />
        </el-form-item>
        <el-form-item label="状态" prop="commodTypeDisplay">
          <el-input  v-model="temp.commodTypeDisplay" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary" @click="headCreate()">
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

 </div> 
</template>

<script>
import { fetchListty, fetchPv, createArticle, updateArticle,deleteArticle } from '@/api/CType'
  export default {
    data() {
      return {
        dialogFormVisible:false,
        temp:{},
        tableData: [],
        listQuery:{
          SkipCount:0,
        }
      }
    },
    created()
    {
     this.GetList();
    },
    methods: {
      GetList()
      {
fetchListty(this.listQuery).then(response => {
        console.log(response)
        this.tableData = response.items;
      })
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      headCreate()
      {
        createArticle(this.temp).then(() => {
            
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
      }
    }
  }
</script>